<template>
  <el-row :gutter="20">
    <el-col :span="6">
        <el-card style="height:240px;">
            <span style="color: #4d62a5;font-size: 20px;font-weight:900;">项目排名</span>
            <el-divider style="margin-top:5px;" />
            <el-row :gutter="20">
                <el-col :span="12">
                    <div style="font-size:5px">
                        <p>昆山假日酒店</p>
                        <p>业主公司名称</p>
                        <p>暖通空调+楼控系统</p>
                    </div>
                    <div style="margin-top:10px;">
                        <p>昆山，江苏</p>
                        <p>950平方米</p>
                        <p>2022年1月8日竣工开业</p>
                        <p>2022年1月8日接入系统</p>
                    </div>
                </el-col>
                <el-col :span="12">
                    <img style="border-radius:5px" src="https://img0.baidu.com/it/u=3812568168,4141521674&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" height="100" width="150" alt="">
                </el-col>
            </el-row>
        </el-card>
    </el-col>
    <el-col :span="12">
        <el-card style="height:240px;">
            <el-row :gutter="5">
                <el-col :span="6"><span style="color: #4d62a5;font-size: 20px;font-weight:900;">舒适</span></el-col>
                <el-col :span="10"></el-col>
                <el-col :span="4">
                    <el-select v-model="value" placeholder="温度" size="small">
                        <el-option label="25℃" value="25" />
                        <el-option label="30℃" value="30" />
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-date-picker style="width:150px" v-model="value1" type="date" placeholder="请选择日期" size="small" />
                </el-col>
            </el-row>
            <el-divider style="margin-top:5px;" />
            <el-row :gutter="5">
                <el-col :span="3">
                    <el-button v-show="wether=='舒适'" style="color:blue" class="el-button-wether" auto-insert-space>{{ wether }}</el-button>
                    <el-button v-show="wether=='良好'" style="color:orange" class="el-button-wether" auto-insert-space>{{ wether }}</el-button>
                    <el-button v-show="wether=='糟糕'" style="color:#DC143C" class="el-button-wether" auto-insert-space>{{ wether }}</el-button>
                </el-col>
                <el-col :span="5">
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <p>温度</p>
                            <p><span style="color:rgb(29,123,203);font-size:20px">23.1</span>℃</p>
                            <p>(18-20)</p>
                        </el-col>
                        <el-col :span="12">
                            <p>湿度</p>
                            <p><span style="color:rgb(29,123,203);font-size:20px">56.3</span>%</p>
                            <p>(30-60)</p>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10" style="margin-top:20px">
                        <el-col :span="12">
                            <p>二氧化碳</p>
                            <p><span style="color:rgb(29,123,203);font-size:20px">560.3</span>ppm</p>
                            <p>(≤1,000)</p>
                        </el-col>
                        <el-col :span="12">
                            <p>PM2.5</p>
                            <p><span style="color:rgb(29,123,203);font-size:20px">32.1</span>μg/m³</p>
                            <p>(≤15)</p>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="12">
                    <scEcharts width="600px" height="160px" :option="option"></scEcharts>
                </el-col>
            </el-row>
        </el-card>
    </el-col>
    <el-col :span="6">
        <el-card style="height:240px;">
            <el-row :gutter="20">
                <el-col :span="6">
                    <span style="color: #4d62a5;font-size: 20px;font-weight:900;">资产价值</span>
                </el-col>
                <el-col :span="8"></el-col>
                <el-col :span="10">
                    <span style="color: #4d62a5;font-size: 15px;font-weight:900;">OAO陪伴
                    <el-button @click="returnforword" style="margin-left:10px;background-color:rgb(77,98,165);" round size="small">
                        <sc-icon>
                            <sc-icon-return  style="width:20px;height:20px;"></sc-icon-return>
                        </sc-icon>
                    </el-button>
                    </span>
                </el-col>
            </el-row>
            <el-divider style="margin-top:5px;" />
            <el-row>
                <el-col :span="8">
                    <div style="margin-top:60px">
                        <p>预期ROI<span style="color:rgb(29,123,203);font-size:20px;margin-left:20px">23.1</span>%</p>
                        <p style="margin-top:20px">预期IRR<span style="color:rgb(29,123,203);font-size:20px;margin-left:20px">23.1</span></p>
                    </div>
                </el-col>
                <el-col :span="16">
                    <scEcharts style="margin-top:-20px" width="300px" height="180px" :option="option1"></scEcharts>
                </el-col>
            </el-row>
        </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="20">
        <el-col :span="6">
            <el-card style="height:540px;">
                <span style="color: #4d62a5;font-size: 20px;font-weight:900;">特色展示</span>
                <el-divider style="margin-top:5px;" />
                <el-row>
                    <el-col :span="4">
                        碳中和成本
                    </el-col>
                    <el-col :span="12"></el-col>
                    <el-col :span="8">
                        <span style="color:rgb(29,123,203);font-size:20px">30,000</span>RMB/年
                    </el-col>
                </el-row>
                <el-row style="margin-top:20px;">
                    <el-col :span="19"></el-col>
                    <el-col :span="5">
                        <span style="font-size:15px;">碳排放</span>
                    </el-col>
                </el-row>
                 <scEcharts width="500px" height="300px" :option="option2"></scEcharts>
                 <el-row style="margin-top: 40px;">
                    <el-col :span="8">
                        助力
                        <el-select style="width:100px" v-model="value2" placeholder="LEED" size="small">
                            <el-option></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="13"></el-col>
                    <el-col :span="3">
                        <span  style="color:rgb(29,123,203);font-size:20px">5</span>分
                    </el-col>
                 </el-row>
            </el-card>
        </el-col>
        <el-col :span="18">
            <el-row :gutter="20">
                <el-col :span="16">
                    <el-card style="height:325px;">
                        <span style="color: #4d62a5;font-size: 20px;font-weight:900;">能耗</span>
                        <el-divider style="margin-top:5px;" />
                        <div style="height:130px;margin-top:-20px;">
                            <el-row>
                                <el-col :span="10">
                                   <div style="margin-left:20px">
                                        <p>
                                            OAO
                                        </p>
                                        <p>
                                            累计收益：<el-select style="width:100px"  v-model="value4" placeholder="节费" size="small">
                                                        <el-option label="节电" value="节电"></el-option>
                                                        <el-option label="节费" value="节费"></el-option>
                                                        <el-option label="减碳" value="减碳"></el-option>
                                                    </el-select>
                                                    <span style="color:rgb(29,123,203);font-size:20px;margin:0 5px 0 20px">26,000</span>RMB
                                        </p>
                                        <p style="margin:20px 0 0 180px;">
                                            超过/不足
                                        </p>
                                        <p>
                                            相比目标：<el-select style="width:100px"  v-model="value5" placeholder="节费" size="small">
                                                        <el-option label="节电" value="节电"></el-option>
                                                        <el-option label="节费" value="节费"></el-option>
                                                        <el-option label="减碳" value="减碳"></el-option>
                                                    </el-select>
                                                    <span style="color:rgb(29,123,203);font-size:20px;margin:0 5px 0 20px">30,000</span>kwh
                                        </p>
                                   </div>
                                </el-col>
                                <el-col :span="14">
                                    <scEcharts style="margin-top:-30px" height="180px" :option="option5"></scEcharts>
                                </el-col>
                            </el-row>
                        </div>
                        <div style="height:130px;margin-top:0;">
                            <scEcharts style="margin-top:-20px;" height="150px" :option="option6"></scEcharts>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card style="height:325px;">
                        <span style="color: #4d62a5;font-size: 20px;font-weight:900;">风险</span>
                        <el-divider style="margin-top:5px;" />
                        <div style="height:130px;margin-top:-20px;">
                            <scEcharts :option="option3"></scEcharts>
                        </div>
                        <div style="height:130px;margin-top:0;">
                            <scEcharts :option="option4"></scEcharts>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-card style="height:200px;">
                        <el-row :gutter="5">
                            <el-col :span="2"><span style="color: #4d62a5;font-size: 20px;font-weight:900;">设备管理</span></el-col>
                            <el-col :span="16"></el-col>
                            <el-col :span="6" style="text-align: right;">
                                <el-date-picker
                                    size="small"
                                    style="width:200px"
                                    v-model="value3"
                                    type="daterange"
                                    range-separator="To"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                />
                            </el-col>
                        </el-row>
                        <el-divider style="margin-top:5px;" />
                        <el-row>
                            <el-col :span="19">
                                <scEcharts style="margin-top:-20px;float:right;" height="150px" :option="option7"></scEcharts>
                            </el-col>
                            <el-col :span="5">
                                <p>运维工单</p>
                                <ul>
                                    <li style="margin-top:10px;" v-for="(item,index) of list" :key="index">
                                        {{ item }}
                                    </li>
                                </ul>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>
        </el-col>
  </el-row>
</template>

<script setup>
import scEcharts from '@/components/scEcharts';
import { reactive, ref } from 'vue'
var value = ref('')
var value1 = ref('')
var value2 = ref('')
var value3 = ref('')
var value4 = ref('')
var value5 = ref('')
var wether = ref('良好')
var list = reactive([
    '22-04-23 09:30 冷冻水出水温度调整为9度',
    '22-04-23 09:30 冷冻水出水温度调整为9度',
    '22-04-23 09:30 冷冻水出水温度调整为9度',
])
var option = reactive(
    {
        
        legend: {
				orient: 'horizontal',
				top: 0,
                right:20,
				itemHeight:1
			},
         xAxis: {
            name:'时',
            type: 'category',
            boundaryGap:false,
            data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
        },
        yAxis:{
            name:'趋势图',
            axisLine:{
				show:true
			},
            type:'value',
        },
        grid: {
				left: '5%',
				right: '10%',
				bottom: '10%',
				containLabel: true
			},
        series: [
            {
                name:'室内',
                data: [1500, 1000, 1200, 1500, 1000, 1000, 1000, 1000, 1000, 1000, 1200,1600,1000],
                type: 'line',
                itemStyle:{
                    color:'#ebebec'
                },
                 markLine:{
                  symbol:'none',  
                  data:[
                    {
                      name:'国内标准',
                      yAxis:1000,
                      lineStyle:{
                        color:'#41c47d',
                        type:'solid',
                      },
                      label:{
                        show:true,
                        formatter:`{c}\n{b}`
                      },
                    },
                    {
                      name:'世卫标准',
                      yAxis:600,
                      lineStyle:{
                        color:'#368dcd',
                        type:'solid'
                      },
                      label:{
                        show:true,
                        formatter:`{c}\n{b}`
                      },
                    }
                  ]
                },
            },
            {
                name:'室外',
                data: [ 1000,1400,1300,1000,1300,1000,1200,1000,1500,1400,1000,1200,1000],
                type: 'line',
                itemStyle:{
                    color:'#55a2d2'
                },
                
            }
        ],
    }
)
var option1=reactive({
    title:{
        subtext:'资产增值',
        right:'10%'
    },
    xAxis: {
    type: 'category',
    data: ['2019','2020','2021']
    },
    yAxis: {
        axisLine:{
            show:true
        },
        name:'K RMB',
        type: 'value'
    },
     grid: {
				left: '5%',
				right: '10%',
				bottom: '10%',
				containLabel: true
			},
    series: [
        {
        data: [
            {
                value:200,
                itemStyle: {
					color: ' #D6EBFA'
				}
            },
            {
                value:140,
                itemStyle: {
					color: '#D6EBFA'
				}
            },
            {
                value:230,
                itemStyle: {
					color: '#D6EBFA'
				}
            },
        ],
        type: 'bar'
        }
    ]
})
var option2=reactive(
   {
			legend: {
				orient: 'horizontal',
				bottom: 20,
                right:60,
				itemHeight:1
			},
			tooltip: {
				trigger: 'axis',
			},
			grid: {
				left: '3%',
				right: '20%',
				bottom: '15%',
				containLabel: true
			},
			dataset: {
				source: [
					['product', '','可比建筑','本地建筑'],
					['2019', 195, 200,225],
					['2020', 140,200,225],
					['2021',230,200,225],
				]
			},
			xAxis: {type: 'category', name: '年'},
			yAxis: {
				name: 'k RMB', 
				axisLine: {
					// x轴线隐藏，但不隐藏背景线
					show: true,
				},
			},
			series: [
				{
				  type: 'bar',
				  itemStyle:{
				    color:'#D6EBFA'
				  },
                
				}, 
			
				{
					type: 'line', symbol: 'none',
					lineStyle: {
						width: 3,
						color:'#fed864'
					},
				},
				{
					type: 'line',
					symbol: 'none',
					lineStyle: {
						width: 3,
						color:'red',
					},
				},
			]
		})
var option3 = reactive({
     title:{
        subtext:'设备健康度',
        right:"right"
    },
    xAxis: {
        name:'日',
        type: 'category',
        data: ['4/20', '4/21', '4/22', '4/23', '4/24', '4/25', '4/26','4/27','昨日','今日']
    },
  yAxis: {
    name:'%',
    axisLine:{
        show:true
    },
    type: 'value'
  },
   grid: {
				left: '5%',
				right: '10%',
				bottom: '10%',
				containLabel: true
			},
  series: [
    {
      data: [10, 15, 25, 10, 15, 20, 30,10,18,15],
      type: 'line',
      lineStyle:{
        color:'rgb(255,196,15)'
      },
      itemStyle:{
        color:'rgb(255,196,15)'
      },
    }
  ]
})
var option4 = reactive({
     title:{
        subtext:'故障修复时间(平均)',
        right:"right"
    },
    xAxis: {
        name:'日',
        type: 'category',
        data: ['4/20', '4/21', '4/22', '4/23', '4/24', '4/25', '4/26','4/27','昨日','今日']
    },
  yAxis: {
    name:'小时',
    axisLine:{
        show:true
    },
    type: 'value'
  },
   grid: {
				left: '5%',
				right: '10%',
				bottom: '10%',
				containLabel: true
			},
  series: [
    {
      data: [10, 15, 25, 10, 15, 20, 30,10,18,15],
      type: 'line',
      lineStyle:{
        color:'rgb(255,196,15)'
      },
      itemStyle:{
        color:'rgb(255,196,15)'
      },
    }
  ]
})
var option5 = reactive(
    {
			legend: {
				orient: 'vertical',
				right: 20,
				top: 'center',
			},
			tooltip: {
				trigger: 'axis',
			},
			grid: {
				left: '3%',
				right: '20%',
				bottom: '3%',
				containLabel: true
			},
			dataset: {
				source: [
					['product', '实际消耗', '能耗预算', '类似建筑', '本地强制', '本地先进'],
					['2019', 200, 150, 30, 200, 150],
					['2020', 100, 150, 55.1, 200, 150],
					['2021', 220, 210, 82.5, 200, 150],
				]
			},
			xAxis: {type: 'category', name: '年'},
			yAxis: {
				name: 'RMB/m²', axisLine: {
					// x轴线隐藏，但不隐藏背景线
					show: true,
				},
			},
			series: [
				{
				  type: 'bar',
				  itemStyle:{
				    color:'#D6EBFA'
				  }
				}, 
				{
				  type: 'bar',
				  itemStyle:{
				    color:'#0070C0'
				  }
				}, 
				{
				  type: 'bar',
				  itemStyle:{
				    color:'#FFA34E'
				  }
				},
				{
					type: 'line', symbol: 'none',
					lineStyle: {
						width: 3,
						color:'#fed864'
					},
				},
				{
					type: 'line',
					symbol: 'none',
					lineStyle: {
						width: 3,
						color:'green',
					},
				},
			]
		}
)
var option6 = reactive(
    {
            legend: {
				orient: 'vertical',
				right: 20,
                bottom:0,
				top: 'center',
			},
			xAxis: {
				name: '月',
				data: ['2021.1', '2021.2', '2021.3', '2021.4', '2021.5', '2021.6', '2021.7', '2021.8', '2021.9', '2021.10','2021.11','2021.12']
			},
			yAxis: {
			  axisLine:{
			    show:true
			  },
				name: 'RMB/㎡',
				type: 'value'
			},
			grid: {
				left: '3%',
				right: '15%',
				bottom: '10%',
				containLabel: true
			},
			series: [
				{
                    name:'实际能耗',
					data: [10, 14, 8, 9, 6, 12, 6, 8, 2, 14,5,10],
					type: 'line',
					smooth:true,
					lineStyle:{
					  color:'#EEEEEE',
					},
					itemStyle:{
					  color:'#EEEEEE'
					},
					areaStyle: {
						color: '#FAFBFC',
						opacity: 0.5
					}
				},
				{
                    name:'目标能耗',
					data: [9, 5, 10, 5, 13, 8, 4, 7, 9, 15,10,5],
					type: 'line',
					smooth:true,
					lineStyle:{
					  color:'#FFC40F',
					},
					itemStyle:{
					  color:'#FFC40F'
					},
					areaStyle: {
						color: '#FBF0CD',
						opacity: 0.5
					}
				}
			]
		}
)
var option7 = reactive(
    {
            legend:{
                width:'auto',
                left:'left',
                bottom:'10%',
                orient:'vertical',
                itemHeight:1
            },
			xAxis: {
				name: '月',
				data: ['2021.1', '2021.2', '2021.3', '2021.4', '2021.5', '2021.6', '2021.7', '2021.8', '2021.9', '2021.10','2021.11','2021.12']
			},
            yAxis:[
                {
                    type:"value",
                    alignTicks:true,
                    name:'%',
                    position:'left',
                    axisLine:{
                        show:true,
                        lineStyle:{
                            color:'#ADAEB4'
                        }
                    }
                },
                {
                    type:"value",
                    alignTicks:true,
                    name:'小时',
                    position:'right',
                    axisLine:{
                        show:true,
                        lineStyle:{
                            color:'#ADAEB4'
                        }
                    }
                }
            ],
			grid: {
				left: '15%',
				right: '5%',
				bottom: '10%',
				containLabel: true
			},
			series: [
				{
                    name:'工单执行率',
					data: [10, 14, 8, 9, 6, 12, 6, 8, 2, 14,5,10],
					type: 'line',
					lineStyle:{
					  color:'#EEEEEE',
					},
					itemStyle:{
					  color:'#EEEEEE'
                    },
				},
				{
                    name:'工单成功执行率',
					data: [9, 5, 10, 5, 13, 8, 4, 7, 9, 15,10,5],
					type: 'line',
					lineStyle:{
					  color:'#FFC40F',
					},
					itemStyle:{
					  color:'#FFC40F'
					},
				},
                {
                    name:'平均工单响应时间',
					data: [8, 9, 12, 6, 7, 10, 8, 15, 11, 8,3,14],
					type: 'line',
					lineStyle:{
					  color:'#0070C0',
					},
					itemStyle:{
					  color:'#0070C0'
					},
				}
			]
		}
)
function returnforword(){
    // console.log(history)
    history.back()
}
</script>

<style>
.el-button-wether{
    width: 80px;
    height: 65px;
    text-align: center;
    line-height: 65px;
    font-size: 22px;
    border-color: rgb(165, 165, 166);
    border-radius: 5px;
}
.legend{
    list-style: none;
    float: right;
}
.legend li{
    display: inline-block;
    margin-left: 5px;
}
</style>



